<template>
  <el-dialog custom-class="music-select-dialog"
             :visible.sync="visible"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="820px"
             top="80px"
             :show-close="false"
             :lock-scroll="false"
             @closed="closed">
    <div class="header"
         slot="title">
      <div class="title">歌曲媒体库</div>
      <div class="search">
        <el-input placeholder="请输入内容"
                  v-model="query.q"
                  size="small"
                  class="input-with-select">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column type="index"
                       align="center"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column prop="name"
                       show-overflow-tooltip
                       label="歌曲">
      </el-table-column>
      <el-table-column prop="singer"
                       label="歌手">
        <template slot-scope="{row}">
          《{{singer(row).name}}》
        </template>
      </el-table-column>
      <el-table-column prop="album"
                       show-overflow-tooltip
                       label="专辑">
        <template slot-scope="{row}">
          《{{album(row).name}}》
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       align="center"
                       width="120">
        <template slot-scope="{row}">
          <el-button type="text"
                     @click="addRow(row)"
                     size="small">添加</el-button>
          <el-button type="text"
                     @click="view(row)"
                     size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer"
         class="footer">
      <el-button @click="closed"
                 size="mini">关闭</el-button>
      <el-pagination layout="total, prev, pager, next"
                     background
                     @current-change="fetch"
                     :current-page.sync="query.page"
                     :page-size="query.limit"
                     style="display: flex;justify-content: center;"
                     :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { fetchList, store } from './api'

export default {
  data () {
    return {
      visible: false,
      selected: [],
      query: {
        q: '周杰伦',
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      refresh: false
    }
  },
  methods: {
    async open () {
      this.visible = true;
      this.refresh = false;
      return new Promise((resolve) => {
        this._resolve = resolve;
      });
    },
    closed () {
      this.visible = false;
      return this._resolve({
        refresh: this.refresh
      });
    },
    /**
     *
     * @param row
     * @returns {{name: string, id: number}}
     */
    singer(row){
      if (row.singers) {
          return row.singers[0]
      }
      return {name: "未知歌手", id: 0};
    },
    /**
     *
     * @param row
     * @returns {{name: string, id: number}}
     */
    album(row){
        if (row.albums) {
            return row.albums[0]
        }
        return {name: "未知专辑", id: 0};
    },
    async addRow (row) {
      const {
        name, id: song_id, imgItems: song_images, tags,
        contentId: content_id, copyrightId: copyright_id, invalidateDate: invalidate, lyricUrl: lrc_url,
        mrcurl: mrc_url, newRateFormats
      } = row;
      const {name: singer, id:singer_id} = this.singer(row);
      const {name: album_name, id:album_id} = this.album(row);
      await this.$confirm(`确定将《${name}-${singer}》加入曲库吗`, '警告');
      const rate_formats = newRateFormats.reverse();
      const hitMusic = rate_formats.filter(({ formatType }) => formatType === 'SQ');
      const music = hitMusic.length ? hitMusic[0] : rate_formats[0];
      const { formatType: top_quality, url, androidUrl = false, iosUrl = false } = music;
      const top_url = url || androidUrl || iosUrl;

      const params = {
        name, song_id, song_images, singer, singer_id, tags, album_name,
        album_id, album_images:song_images, content_id, copyright_id, invalidate,
        lrc_url, mrc_url, top_quality, top_url, rate_formats
      };
      await store(params);
      this.refresh = true;
      this.$message.success('添加成功')
    },
    async fetch (page) {
      if (!this.query.q) {
        this.$message.warning('请输入关键词');
        return;
      }
      if (page) {
        this.query.page = page
      }
      const { data } = await fetchList(this.query);
      this.list = data.data
      this.total = data.meta.total
    },
    async search () {
      await this.fetch(1)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.music-select-dialog {
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    .title {
      line-height: 32px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .el-pagination {
      padding: 0;
      margin: 0;
    }
  }
}
</style>
